import React, {
    PureComponent
} from 'react';

import {
    Text,
    View,
    Image,
    StyleSheet
} from 'react-native';

import {
    Press,
    FastImage
} from './../../../components';

import {
    Actions
} from 'react-native-router-flux';

import {
    Profile
} from './../../../types/types';

interface Props {
    data:Profile
}

import * as Const from './../../../const';
import parseUrl from "../../../utils/parseUrl";
import location_icon from './../../../images/home/discover/address.png';

class DiscoverItem extends PureComponent <Props>{

    static defaultProps = {
        data:{}
    }

    get Data() {
        const {
            data
        } = this.props;
        return data || {};
    }

    get age() {
        const {
            age
        } = this.Data;
        return age||19
    }

    get photos() {
        const {
            photos = []
        } = this.Data;
        return photos;
    }

    get userName() {
        const {
            userName
        } = this.Data;
        return userName;
    }

    get avatarUrl() {
        const {
            avatorUrl
        } = this.Data;
        return parseUrl(avatorUrl,true);
    }

    get userId() {
        const {
            userId
        } = this.Data;
        return userId;
    }

    get location() {
        const {
            location
        } = this.Data;
        return location ||{} as any
    }

    get cityLabel() {
        const {
            city = {}
        } = this.location;
        return city.label;
    }

    get descLabel() {
        return [
            this.age,
            this.cityLabel
        ].filter(v=>!!v).join(`,`)
    }

    get distanceLabel() {
        const {
            distance = {}
        } = this.Data;

        const {
            id = -1,
            label
        } = distance as any;
        if (id === -1) {
            return `Unable to confirm`
        }
        return `${~~id} ${label} from you`
    }

    private toProfile = () => {
        Actions.push(`/profile/:userId`,{
            userId:this.userId
        })
    }

    render() {
        return (
            <Press
                type={null}
                style={styles.container}
                onPress={this.toProfile}
            >
                <View style={styles.header}>
                    <FastImage
                        url={this.avatarUrl}
                        style={styles.avatarStyle}
                    />
                </View>
                <View style={styles.content}>
                    <Text style={styles.userName}>
                        {this.userName}
                    </Text>
                    <Text style={styles.descName}>
                        {this.descLabel}
                    </Text>
                    <View style={styles.distance}>
                        <Image
                            source={location_icon}
                            style={styles.distanceIcon}
                        />
                        <Text style={styles.distanceLabel}>
                            {this.distanceLabel}
                        </Text>
                    </View>
                </View>
            </Press>
        )
    }
}

export default DiscoverItem;

const styles = StyleSheet.create({
    container:{
        flex:1,
        padding:6,
        borderWidth:1,
        borderRadius:8,
        borderColor:`#eee`,
        backgroundColor:`#fff`
    },
    header:{
        flex:1
    },
    avatarStyle:{
        flex:1,
        borderRadius:4,
        borderWidth:1,
        overflow:`hidden`,
        borderColor:`#eee`
    },
    content:{
        height:120,
        paddingVertical:16
    },
    userName:{
        color:`#454545`,
        fontSize:16,
        fontWeight:`bold`,
        marginBottom:10,
        textAlign:`center`
    },
    descName:{
        fontSize:20,
        fontWeight:`bold`,
        color:Const.color,
        textAlign:`center`
    },
    distance:{
        marginTop:15,
        alignItems:`center`,
        flexDirection:`row`,
        justifyContent:`center`
    },
    distanceLabel:{
        fontSize:15,
        color:`#696969`
    },
    distanceIcon:{
        marginRight:2
    }
}) as any;